<template>
  <div class="surface-rainfall-forecast">
    <div class="right-panel">
      <!-- 标题 -->
      <div class="right-panel-title">
        <div class="title-left"></div>
        <span>(面)&nbsp;&nbsp;雨量</span>
      </div>
      <!-- 选择 -->
      <div class="select-btn">
        <span
          @click="selectTitleIndex = 0"
          :class="selectTitleIndex == 0 ? 'select-title' : ''"
          >预报</span
        >
        <span
          @click="selectTitleIndex = 1"
          :class="selectTitleIndex == 1 ? 'select-title' : ''"
          >实况</span
        >
      </div>
      <!-- 选择时间 -->
      <div class="select-time">
        <span>选择时间</span>
        <el-date-picker
          v-model="selectTime"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
          <template v-slot:range-separator>
            <i class="iconfont icon-daoda"></i>
          </template>
        </el-date-picker>
      </div>
      <!-- 快速选择 -->
      <div class="select-quick">
        <span>快速选择</span>
        <!-- 预报的快速选择 -->
        <div v-if="selectTitleIndex == 0">
          <button
            v-for="(item, index) in selectYuBaoQuickItems"
            :key="item.id"
            @click="selectQuickIndex = index"
            :class="selectQuickIndex == index ? 'select-quick-active' : ''"
          >
            {{ item.label }}
          </button>
        </div>
        <!-- 实况的快速选择 -->
        <div v-if="selectTitleIndex == 1">
          <button
            v-for="(item, index) in selectSKQuickItems"
            :key="item.id"
            @click="selectQuickIndex = index"
            :class="selectQuickIndex == index ? 'select-quick-active' : ''"
          >
            {{ item.label }}
          </button>
        </div>
      </div>
      <!-- 时间间隔 -->
      <div class="select-time-space">
        <span>时间间隔</span>
        <div>
          <button
            v-for="(item, index) in selectTimeSpace"
            :key="item.id"
            @click="selectTimeSpaceIndex = index"
            :class="selectTimeSpaceIndex == index ? 'select-quick-active' : ''"
          >
            {{ item.label }}
          </button>
        </div>
      </div>
      <!-- 时效 -->
      <div class="select-time-duration">
        <span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时效</span
        >
        <el-select v-model="validity" placeholder="请选择">
          <el-option
            v-for="item in validityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 流域 -->
      <div class="select-river">
        <span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;流域</span
        >
        <div>
          <div class="select-river-line1">
            <el-radio v-model="basin" label="1">中小流域</el-radio>
            <el-radio v-model="basin" label="2">山洪沟</el-radio>
            <el-radio v-model="basin" label="3">水库上游集水区</el-radio>
          </div>
          <div class="select-river-line2">
            <el-radio v-model="basin" label="4">主要河流</el-radio>
            <el-radio v-model="basin" label="5">行政区域</el-radio>
          </div>
        </div>
      </div>
      <!-- 隐患点 -->
      <div class="select-yinhuan">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;隐患点</span>
        <el-radio v-model="basin" label="6">地灾隐患点</el-radio>
        <el-radio v-model="basin" label="7">山洪隐患点</el-radio>
      </div>
      <!-- 市 -->
      <div class="select-city">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所属市</span>
        <el-select v-model="city" placeholder="请选择" :disabled="basin != '5'">
          <el-option
            v-for="item in cityOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 县 -->
      <div class="select-county">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所属县</span>
        <el-select
          v-model="county"
          placeholder="请选择"
          :disabled="basin != '5'"
        >
          <el-option
            v-for="item in countyOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <!-- 数据源 -->
      <div class="data-type">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数据源</span>
        <!-- 实况 -->
        <div v-if="selectTitleIndex == 0">
          <div>
            <el-radio v-model="dataType" label="1">ECMEF</el-radio>
            <el-radio v-model="dataType" label="2">智能网格</el-radio>
            <el-radio v-model="dataType" label="3">数据对比</el-radio>
          </div>
          <div>
            <el-radio v-model="dataType" label="4">EC对比</el-radio>
            <el-radio v-model="dataType" label="5">智能网格对比</el-radio>
          </div>
        </div>
        <div v-if="selectTitleIndex == 1">
          <el-radio v-model="dataType" label="1">站点</el-radio>
          <el-radio v-model="dataType" label="2">融合网格</el-radio>
        </div>
      </div>
      <!-- 面雨量 -->
      <div class="rain-show-type">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;面雨量</span>
        <el-checkbox-group v-model="surfaceRainfall">
          <el-checkbox
            v-for="item in surfaceRainfallOptions"
            :label="item.value"
            :key="item.label"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <!-- 查询 -->
      <div class="query">
        <button
          @click="query"
          :class="queryActiveIndex == 0 ? 'select-quick-active' : ''"
        >
          查询
        </button>
        <button
          @click="download"
          :class="queryActiveIndex == 1 ? 'select-quick-active' : ''"
        >
          导出
        </button>
      </div>
    </div>
    <!-- 图表 -->
    <div class="charts" v-if="isShowCharts">
      <div class="charts-panel-title">
        <div class="charts-title-left">
          <div class="charts-icon"></div>
          <span>(面)&nbsp;&nbsp;面雨量时序图</span>
        </div>
        <div class="charts-closed">
          <span @click="isShowCharts = false">&#x78;</span>
        </div>
      </div>
      <div class="charts-select-time">
        <span>选择时间</span>
        <el-date-picker
          v-model="timeOfCharts"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        >
          <template v-slot:range-separator>
            <i class="iconfont icon-daoda"></i>
          </template>
        </el-date-picker>
      </div>
      <div class="charts-option-select">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;时段</span>
        <div>
          <el-radio v-model="selectChartTime" label="1" @input="updateCharts">小时</el-radio>
          <el-radio v-model="selectChartTime" label="2" @input="updateCharts">日</el-radio></div>
      </div>
      <div class="charts-option-select">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;预报</span>
        <div>
          <el-radio v-model="chartYbDataType" label="1">ECMEF</el-radio>
          <el-radio v-model="chartYbDataType" label="2">智能网格</el-radio></div>
      </div>
      <div class="charts-option-select">
        <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;实况</span>
        <div>
          <el-radio v-model="chartSkDataType" label="1">站点实况</el-radio>
          <el-radio v-model="chartSkDataType" label="2">融合网格</el-radio></div>
      </div>
      <!-- 图表查询 -->
      <div class="charts-query">
        <el-button type="primary" size="mini" @click="updateCharts">查询</el-button>
      </div>
      <!-- 图表区 -->
      <div class="charts-surface-rainfull-container" ref="echartsContainer"></div>
    </div>
    <!-- 图例区域 -->
    <div class="surface-rainfull-legend">
      <div>降雨点图例</div>
      <div class="legend-show">
        <div class="legend-line">
          <div class="legend-icon line1"></div>
          <div class="legend-num">>=250</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line1"></div>
          <div class="legend-num">100-250</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line2"></div>
          <div class="legend-num">50-100</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line3"></div>
          <div class="legend-num">25-50</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line4"></div>
          <div class="legend-num">10-25</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line5"></div>
          <div class="legend-num">0.1-10</div>
        </div>
        <div class="legend-line">
          <div class="legend-icon line6"></div>
          <div class="legend-num">0</div>
        </div>
      </div>
      <div>单位:毫米</div>
    </div>
    <!-- 工具 -->
    <div class="surface-rainfull-tool" v-if="dataType != '1' || dataType != '2'">
      <div class="surface-rainfull-map-tool">
        <div class="map-tool-item" @click="relieve()">
          <img
            src="../../assets/images/surface-rainforecast/relieve.png"
            alt=""
          />
          <span>解除分屏</span>
        </div>
      </div>
    </div>
    <DialogList
      v-if="dialogTableVisible"
      :title="title"
      :currentData="currentData"
      @closedDiglog="closedDiglog"
      :dialogTableVisible="dialogTableVisible"
    ></DialogList>

    <DialogCompare
      v-if="isShowCompareDialog"
      :titleLeft="tiltleLeft"
      :titleRight="titleRight"
      :dialogTableVisible="isShowCompareDialog"
      :currentDataLeft="selectCurrentLeft"
      :currentDataRight="selectCurrentRight"
      @closedDiglogCompare="closedDiglogCompare"
      @showHightLayer="showHightLayer"
    ></DialogCompare>
    <div class="fenping-title" v-if="isShowfenPingTitle">
      <div class= "title-fenping-left">{{ fenPingLeft }}</div>
      <div class="title-fenping-right">{{ fenPingRight }}</div>
    </div>
  </div>
</template>

<script>
import cityData from "/src/assets/city.json";
import JSONData from '/src/map/新疆维吾尔自治区.json';
import _ from "lodash";
import styleUtil from "./utils";
import moment from "moment";
import { Vector } from "ol/layer";
import { Feature, Map } from "ol";
import { Point, Polygon } from "ol/geom";
import { Vector as VectorSource } from "ol/source";
import { Style, Text, Fill, Circle } from "ol/style";
import * as layer from "ol/layer";
import * as XLSX from 'xlsx';
//预报的接口
import {
  //中小河流域
  getRiverRainYbWithShuZhi,
  getRiverRainYbWithYanSe,
  getRiverRainYbWithLieBiao,
  //山洪沟
  getGullyRainYbShuZhi,
  getGullyRainYbYanSe,
  getGullyRainYbLieBiao,
  //水库上游面雨量预报
  getReservoirRainYbShuzhi,
  getReservoirRainYbYanSe,
  getReservoirRainYbLieBiao,
  //主要河流
  getMainRiverShuzhi,
  getMainRiverYanSe,
  getMainRiverLieBiao,
  //行政区
  getadministrativeRegionShuZhi,
  getadministrativeRegionLieBiao,
  getadministrativeRegionYanSe,
  //地址灾害
  getdzPotentialPointsRainYbShuZhi,
  getdzPotentialPointsRainYbYanSe,
  getdzPotentialPointsRainYblieBiao,
  //洪水灾害隐患点
  getshPotentialPointsRainYbShuzhi,
  getshPotentialPointsRainYbYanSe,
  getshPotentialPointsRainYbLieBiao,
} from "@/api/zhjcright";
//实况的接口
import {
  //中小河流域
  getriverRainSkShuzhi,
  getriverRainSkYanSe,
  getriverRainSkLieBiao,
  //山洪沟
  getGullyRainSkShuZhi,
  getGullyRainSkYanSe,
  getGullyRainSkLieBiao,
  //水库上游面雨量预报
  getReservoirRainSkShuZhi,
  getReservoirRainSkYanse,
  getReservoirRainSkLieBiao,
  //主要河流
  getMainRiverSKShuZhi,
  getMainRiverSKYanSe,
  getMainRiverSKLieBiao,
  //行政区
  getAdministrativeRegionSKShuZhi,
  getAdministrativeRegionSKYanse,
  getAdministrativeRegionSKLieBiao,
  //地址灾害
  getdzPotentialPointsRainSkShuZhi,
  getdzPotentialPointsRainSkYanse,
  getdzPotentialPointsRainSkLieBiao,
  //洪水灾害隐患点
  getshPotentialPointsRainSkShuZhi,
  getshPotentialPointsRainSkYanse,
  getshPotentialPointsRainSkLieBiao,
} from '@/api/zhjcright'
//图表查询
import {
  //中小河和主要河流
  getQueryRainfallTimeSeriesChart,
  //山洪沟
  getQueryRainfallTimeSeriesChart2,
  //水库上游
  getQueryRainfallTimeSeriesChart5,
  //行政区
  getQueryRainfallTimeSeriesChart6,
  //地灾
  getQueryRainfallTimeSeriesChart3,
  //山洪灾
  getQueryRainfallTimeSeriesChart4,
} from '@/api/zhjcright'
import { createHighLayer } from "./utils";
import { v4 as uuidv4 } from "uuid";
//图表的主题
import walden from '@/assets/theme/walden.json';
//组件
import DialogList from "./compoents/dialogList.vue";
import DialogCompare from "./compoents/dialogCompare.vue";
import * as echarts from 'echarts';
echarts.registerTheme("walden",walden);
export default {
  name: "SurfaceRainfallForecast",
  components: {
    DialogList,
    DialogCompare,
  },
  data() {
    return {
      //预报和实况的选择
      selectTitleIndex: 0,
      //选择时间
      selectTime: [new Date(2023, 0, 1, 0, 0, 0), new Date()],
      //快速选择预报
      selectQuickIndex: 0,
      selectYuBaoQuickItems: [
        {
          label: "未来1天",
          value: "1",
          id: uuidv4(),
        },
        {
          label: "未来2天",
          value: "2",
          id: uuidv4(),
        },
        {
          label: "未来3天",
          value: "3",
          id: uuidv4(),
        },
        {
          label: "未来7天",
          value: "7",
          id: uuidv4(),
        },
      ],
      //实况的快速选择选项
      selectSKQuickItems: [
        {
          label: "过去1天",
          value: 1,
          id: uuidv4(),
        },
        {
          label: "过去2天",
          value: 2,
          id: uuidv4(),
        },
        {
          label: "过去3天",
          value: 3,
          id: uuidv4(),
        },
        {
          label: "过去7天",
          value: 7,
          id: uuidv4(),
        },
      ],
      //时间间隔
      selectTimeSpaceIndex: 0,
      selectTimeSpace: [
        {
          label: "1小时",
          value: "1",
          id: uuidv4(),
        },
        {
          label: "3小时",
          value: "3",
          id: uuidv4(),
        },
        {
          label: "12小时",
          value: "12",
          id: uuidv4(),
        },
        {
          label: "24小时",
          value: "24",
          id: uuidv4(),
        },
      ],
      //时效
      validity: "1",

      //流域
      basin: "1",
      //隐患点
      hiddenDangerPoint: "1",

      //城市数据
      city: null,
      cityOptions: [],
      //县的数据
      county: null,
      //数据源
      dataType: "1",
      //面雨量
      surfaceRainfall: [],
      surfaceRainfallOptions: [
        {
          value: "1",
          label: "数值",
        },
        {
          value: "2",
          label: "填色",
        },
        {
          value: "3",
          label: "列表",
        },
      ],
      //查询或者导出
      queryActiveIndex: 0,

      //数值图层
      shuzhiLayer:null,
      //填色图层
      fillColorLayer:null,
      //当前的数据
      currentData: null,
      dialogTableVisible: false,
      title: "",

      //分屏的地图
      map2: null,
      //原来地图的尺寸
      originWidth: 0,
      originHeight: 0,
      //地图的fulei
      parent: null,

      //左边的列表是否显示
      selectCurrentLeft: null,
      tiltleLeft: "",
      //右边的智能网格的列表
      selectCurrentRight: null,
      titleRight: "",
      isShowCompareDialog: false,

      //图表的数据
      myCharts:null,
      xAxisData:["21日8时","22日8时","23日8时","24日8时","25日8时","26日8时","27日8时"],
      yAxisData:[0.18,0.23,0.2,0.4,0.3,0.4,0.2],
      //图表默认的时间
      timeOfCharts:null,
      //图表的显示与关闭
      isShowCharts:false,
      //图表时段的选择
      selectChartTime:"2",
      //图表查询的预报数据类型
      chartYbDataType:"1",
      //图表查询的实况的数据类型
      chartSkDataType:"1",
      //当前图表中的中展示的面雨量的要素的名称
      currentChartsFeatureName:"",
      //分屏的左标题
      fenPingLeft:"",
      //分屏的右标题
      fenPingRight:"",
      //是否显示分屏的标题
      isShowfenPingTitle:false,
    };
  },
  computed: {
    //获取对应的时效选项
    validityOptions() {
      const timeSpace = this.selectTimeSpace[this.selectTimeSpaceIndex].value;
      const options = [];
      //1小时的间隔
      if (timeSpace == "1") {
        for (let i = 1; i <= 168; i++) {
          options.push({
            value: i + "",
            label: i + "",
          });
        }
      } else if (timeSpace == "3") {
        for (let i = 3; i <= 168; i += 3) {
          options.push({
            value: i + "",
            label: i + "",
          });
        }
      } else if (timeSpace == "12") {
        for (let i = 12; i <= 168; i += 12) {
          options.push({
            value: i + "",
            label: i + "",
          });
        }
      } else if (timeSpace == "24") {
        for (let i = 24; i <= 168; i += 24) {
          options.push({
            value: i + "",
            label: i + "",
          });
        }
      }
      return options;
    },
    countyOptions() {
      if (this.city == null) {
        return null;
      }
      if (this.city == "650000") {
        return [];
      }
      const children = this.cityOptions.find(
        (item) => item.value == this.city
      ).children;
      // const allIndex = children.findIndex((item) => item.label == "全部");
      // if (allIndex != -1) {
      //   children.splice(allIndex, 1);
      // }
      // children.unshift({ value: this.city, label: "全部" });
      return children;
    },
  },
  mounted() {
    this.initCityData();
    //初始化三个图层
    this.shuzhiLayer = new Vector({
      source: new VectorSource({}),
      zIndex: 30,
      name: "surface-rainfall-forecast-shuzhi-layer",
    });
    this.fillColorLayer = new Vector({
      source: new VectorSource({}),
      name: "surface-rainfall-forecast-fillcolor-layer",
      zIndex: 25,
    });
    const map = this.$store.getters.Map.map;
    map.addLayer(this.fillColorLayer);
    map.addLayer(this.shuzhiLayer);

    //监听map的点击事件
    map.on("click",this.clickFeature);
  },
  beforeDestroy(){
    this.$store.getters.Map.map.un("click",this.clickFeature);
    this.$store.getters.Map.map.removeLayer(this.fillColorLayer);
    this.$store.getters.Map.map.removeLayer(this.shuzhiLayer);
  },
  watch: {
    isShowCharts(){
      if(this.isShowCharts === true){
        //数据重置
        this.selectChartTime = '2';
        this.timeOfCharts = null;
        this.chartSkDataType = '1';
        this.chartYbDataType = '1';
        this.$nextTick(()=>{
          this.initCharts();
          this.updateCharts();
        })
      }
    }
  },
  methods: {
    //初始化市的数据
    initCityData() {
      const province = cityData.data.find((item) => item.value == "650000");
      // const allIndex = province.children.findIndex(
      //   (item) => item.label == "全部"
      // );
      // if (allIndex != -1) {
      //   province.children.splice(allIndex, 1);
      // }
      // province.children.unshift({ value: "650000", label: "全部" });
      this.cityOptions = province.children;
    },
    //初始化图表
    initCharts(){
      this.myCharts = echarts.init(this.$refs.echartsContainer,'walden');
      // this.myCharts && this.myCharts.setOption(initOption);
    },

    //地图要素点击
    clickFeature(e){
      const feature = this.$store.getters.Map.map.forEachFeatureAtPixel(e.pixel, (feature, layer) => {
        return feature;
      });
      if (feature) {
        this.currentChartsFeatureName = feature.get("name");
        this.isShowCharts = true;
      }
    },

    //更新图表的数据
    async updateCharts(){
      let startTime;
      let endTime;
      const format = "YYYY-MM-DD HH:mm:ss";
      //默认选择
      if(this.timeOfCharts == null){
        const now = new Date();
        //小时
        if(this.selectChartTime == '1'){
          startTime = moment( new Date(now.getTime() - 24 * 60 * 60 * 1000)).format(format);
          endTime = moment(new Date(now.getTime() + 24 * 60 * 60 * 1000)).format(format);
        }
        //日
        else if(this.selectChartTime == '2'){
          startTime = moment(new Date(now.setDate(now.getDate() - 7))).format(format);
          endTime = moment(new Date(now.setDate(now.getDate() + 7))).format(format);
        }
      }
      //时间控件选择
      else {
        startTime = moment(this.timeOfCharts[0]).format(format);
        endTime = moment(this.timeOfCharts[1]).format(format);
      }
      const lyName = this.currentChartsFeatureName;
      const skType = this.chartSkDataType == '1' ? '站点实况' : '融合网格';
      const ybType = this.chartYbDataType == '1' ? 'EC网格' : '智能网格';
      const options = {
        startTime,
        endTime,
        skType,
        ybType,
        lyName,
      }
      console.log(options);
      let res;
      //中小河流域和主要河流
      if(this.basin == '1' || this.basin == '4'
      ){
        res = await getQueryRainfallTimeSeriesChart(options);
      }
      //山洪沟
      else if(this.basin == '2'){
        res = await getQueryRainfallTimeSeriesChart2(options)
      }
      //水库上游
      else if(this.basin == '3'){
        res = await getQueryRainfallTimeSeriesChart5(options);
      }
      //行政区
      else if(this.basin == '5'){
        res = await getQueryRainfallTimeSeriesChart6(options);
      }
      //地灾
      else if(this.basin == '6'){
        res = await getQueryRainfallTimeSeriesChart3(options);
      }
      //山洪灾害
      else if(this.basin == '7'){
        res = await getQueryRainfallTimeSeriesChart4(options)
      }
      console.log(res);
      if(res.code == 200){
        const yAxisData = [];
        const xAxisData = [];
        const maxs = [];
        const sks = res.data.SK;
        const ybs = res.data.YB;
        sks && sks.forEach(sk=>{
          yAxisData.push(parseFloat(sk.areaRain));
          xAxisData.push(sk.observTime);
          maxs.push(parseFloat(sk.warningLevel))
        })
        ybs && ybs.forEach(yb=>{
          yAxisData.push(parseFloat(yb.areaRain));
          xAxisData.push(yb.forecasTime)
          maxs.push(parseFloat(yb.warningLevel))
        })
        //对时间进行排序
        xAxisData.sort((a,b)=>{
          return new Date(a) - new Date(b);
        })
        //计算实况的占比
        let skCount = 0;
        xAxisData.forEach(item=>{
          if(new  Date(item) < new Date()){
            skCount++;
          }
        })
        const skPercent = xAxisData.length > 0 ? skCount / xAxisData.length : 0;
        const option = {
          tooltip:{
          trigger:"axis",
          formatter:(val)=>{
            const name = val[0].name;
            if(new Date(name) < new Date()){
              return "实况 " + "日期: " + name + "\n" + "雨量 :" + val[0].value;
            }
            return "预报 " + "日期: " + name + "\n" + "雨量 :" + val[0].value;
          }
        },
        grid:{
          show:false,
          left: "10%",
          top: "10%",
          right: "4%",
          bottom: "10%",
        },
          yAxis:{
          type:"value",
          axisLine:{
            lineStyle:{
              width:2,
            }
          },
          axisLabel:{
            color:"white",
            fontSize:14,
          },
          axisTick:{
            lineStyle:{
              width:2,
            }
          },
          name:"mm",
          nameTextStyle:{
            color:"white",
            fontSize:14,
          }
        },
        
        xAxis: {
          data:xAxisData.map(item=>item.split(" ")[0]),
          type: "category",
          axisLine:{
            lineStyle:{
              width:2,
            }
          },
          axisLabel:{
            color:"white",
            fontSize:14,
          },
          axisTick:{
            lineStyle:{
              width:2,
            }
          }
        },
        series:[
          {
            type:"line",
            data:yAxisData,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(26, 154, 220, 0.18)",
                },
                {
                  offset: skPercent,
                  color: "rgba(26, 154, 220, 0.18)",
                },
                {
                  offset: skPercent,
                  color: "rgba(35, 250, 180, 0.18)",
                },
                {
                  offset: 1,
                  color: "rgba(35, 250, 180, 0.18)",
                }
              ]),
            },
            itemStyle:{
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: "rgba(26, 154, 220, 0.18)",
                },
                {
                  offset: skPercent,
                  color: "rgba(26, 154, 220, 0.18)",
                },
                {
                  offset: skPercent,
                  color: "rgba(35, 250, 180, 0.18)",
                },
                {
                  offset: 1,
                  color: "rgba(35, 250, 180, 0.18)",
                }
              ]),
            },
          },
          
        ]
      };
        this.myCharts && this.myCharts.setOption(option);
      }
    },

    //查询
    query() {
      console.log(this.$store.getters.Map.map.getAllLayers());
      this.queryActiveIndex = 0;
      const options = {};
      let startTime;
      let endTime;
      let formatter = "YYYY-MM-DD HH:mm:ss";
      if (this.selectTime) {
        startTime = moment(this.selectTime[0]).format(formatter);
        endTime = moment(this.selectTime[1]).format(formatter);
      } else {
        startTime = moment(new Date()).format(formatter);
        const days = parseInt(
          this.selectTitleIndex == 0
            ? this.selectYuBaoQuickItems[this.selectQuickIndex].value
            : this.selectSKQuickItems[this.selectQuickIndex].value
        );
        const now = new Date();
        endTime = moment(
          new Date().setDate(
            now.getDate() + this.selectTitleIndex == 0 ? days : -days
          )
        ).format(formatter);
      }
      options.startTime = startTime;
      options.endTime = endTime;
      options.nTimes = this.validity;
      console.log(options);
      //预报
      if (this.selectTitleIndex == 0) {
        if (this.dataType == "1") {
          options.type = "EC网格";
        } else if (this.dataType == "2") {
          options.type = "智能网格";
        }
        //数据源对比
        else if (this.dataType == "3") {
          //中小河流EC和只能网格对比
          //创建分屏
          const { shuzhiLayer, fillColorLayer } = this.getMap2TargetLayer();  
          const typeArr = ["EC网格", "智能网格"];
          if (this.basin == "1") {
            this.compareWithSplitScreen(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "中小河流域-EC网格预报",
              "中小河流域-智能网格预报"
            );
          }
          if (this.basin == "2") {
            this.compareWithSplitScreen(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪沟-EC网格预报",
              "山洪沟-智能网格预报"
            );
          }
          if (this.basin == "3") {
            this.compareWithSplitScreen(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "水库上游面雨量-EC网格预报",
              "水库上游面雨量-智能网格预报"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareWithSplitScreen(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "主要河流-EC网格预报",
              "主要河流-智能网格预报"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareWithSplitScreen(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "行政区域-EC网格预报",
              "行政区域-智能网格预报"
            );
          }
          if (this.basin == "6") {
            this.compareWithSplitScreen(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "地灾害隐患点-EC网格预报",
              "地灾害隐患点-智能网格预报"
            );
          }
          if (this.basin == "7") {
            this.compareWithSplitScreen(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪隐患点-EC网格预报",
              "山洪隐患点-智能网格预报"
            );
          }
          this.showTitleSliptScreen(options,typeArr);
        }
        //EC对比
        else if (this.dataType == "4") {
          //创建分屏
          const { shuzhiLayer, fillColorLayer } = this.getMap2TargetLayer();
          const typeArr = ["EC网格", "EC网格"];
          if (this.basin == "1") {
            this.compareWithSplitScreen(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "中小河流域-EC网格预报当前时效",
              "中小河流域-EC网格预报下个时效"
            );
          }
          if (this.basin == "2") {
            this.compareWithSplitScreen(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪沟-EC网格预报当前时效",
              "山洪沟-EC网格预报下个时效"
            );
          }
          if (this.basin == "3") {
            this.compareWithSplitScreen(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "水库上游面雨量-EC网格预报当前时效",
              "水库上游面雨量-EC网格预报下个时效"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareWithSplitScreen(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "主要河流-EC网格预报当前时效",
              "主要河流-EC网格预报下个时效"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareWithSplitScreen(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "行政区域-EC网格预报当前时效",
              "行政区域-EC网格预报下个时效"
            );
          }
          if (this.basin == "6") {
            this.compareWithSplitScreen(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "地灾害隐患点-EC网格预报当前时效",
              "地灾害隐患点-EC网格预报下个时效"
            );
          }
          if (this.basin == "7") {
            this.compareWithSplitScreen(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪隐患点-EC网格预报当前时效",
              "山洪隐患点-EC网格预报下个时效"
            );
          }
          this.showTitleSliptScreen(options,["EC网格预报当前时效","EC网格预报下个时效"]);
        }
        //智能对比
        else if (this.dataType == "5") {
          //创建分屏
          const typeArr = ["智能网格", "智能网格"];
          const { shuzhiLayer, fillColorLayer } = this.getMap2TargetLayer();
          if (this.basin == "1") {
            this.compareWithSplitScreen(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "中小河流域-智能网格预报当前时效",
              "中小河流域-智能网格预报下个时效"
            );
          }
          if (this.basin == "2") {
            this.compareWithSplitScreen(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪沟-智能网格报当前时效",
              "山洪沟-智能网格报下个时效"
            );
          }
          if (this.basin == "3") {
            this.compareWithSplitScreen(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "水库上游面雨量-智能网格预报当前时效",
              "水库上游面雨量-智能网格预报下个时效"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareWithSplitScreen(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "主要河流-智能网格预报当前时效",
              "主要河流-智能网格预报下个时效"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareWithSplitScreen(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "行政区域-智能网格预报当前时效",
              "行政区域-智能网格预报下个时效"
            );
          }
          if (this.basin == "6") {
            this.compareWithSplitScreen(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "地灾害隐患点-智能网格预报当前时效",
              "地灾害隐患点-智能网格预报下个时效"
            );
          }
          if (this.basin == "7") {
            this.compareWithSplitScreen(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              [shuzhiLayer, fillColorLayer],
              [this.shuzhiLayer, this.fillColorLayer],
              "山洪隐患点-智能网格预报当前时效",
              "山洪隐患点-智能网格预报下个时效"
            );
          }
          this.showTitleSliptScreen(options,["智能网格预报当前时效","智能网格预报下个时效"]);
        }
        if (this.dataType == "1" || this.dataType == "2") {
          //中小河流域
          if (this.basin == "1") {
            this.handleByChoose(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              options,
              "中小河流域"
            );
          }
          //山洪沟
          if (this.basin == "2") {
            this.handleByChoose(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              options,
              "山洪沟"
            );
          }
          //水库上游面雨量预报
          if (this.basin == "3") {
            this.handleByChoose(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              options,
              "水库上游面"
            );
          }
          //主要河流
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.handleByChoose(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              options,
              "主要河流"
            );
          }
          //行政区
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.handleByChoose(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              options,
              "行政区域"
            );
          }
          if (this.basin == "6") {
            this.handleByChoose(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              options,
              "地灾隐患点"
            );
          }
          if (this.basin == "7") {
            this.handleByChoose(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              options,
              "山洪隐患点"
            );
          }
        }
      }
      //实况
      else if (this.selectTitleIndex == 1) {
        if (this.dataType == "1") {
          options.type = "站点实况";
        } else if (this.dataType == "2") {
          options.type = "融合网格";
        }
        //中小河流域
        if (this.basin == "1") {
          this.handleByChoose(
            [
            getriverRainSkShuzhi,
            getriverRainSkYanSe,
            getriverRainSkLieBiao,
            ],
            options,
            "中小河流域面雨量实况",
          );
        }
        //山洪沟
        else if (this.basin == "2") {
          this.handleByChoose(
            [getGullyRainSkShuZhi,getGullyRainSkYanSe,getGullyRainSkLieBiao],
            options,
            "山洪沟面雨量实况"
          );
        }
        //水库上游面雨量预报
        else if (this.basin == "3") {
          this.handleByChoose(
            [
            getReservoirRainSkShuZhi,
            getReservoirRainSkYanse,
            getReservoirRainSkLieBiao,
            ],
            options,
            "水库上游面雨量实况"
          );
        }
        //主要河流
        else if (this.basin == "4") {
          options.river = parseInt(Math.random() * 10);
          console.log(options);
          this.handleByChoose(
            [
            getMainRiverSKShuZhi,
            getMainRiverSKYanSe,
            getMainRiverSKLieBiao,
            ],
            options,
            "主要河流面雨量"
          );
        }
        //行政区
        else if (this.basin == "5") {
          let areacode;
          if (this.city == "650000") {
            areacode = parseInt(this.city + "000000");
          } else {
            areacode = parseFloat(this.county + "000000");
          }
          options.areacode = areacode;
          this.handleByChoose(
            [
            getAdministrativeRegionSKShuZhi,
            getAdministrativeRegionSKYanse,
            getAdministrativeRegionSKLieBiao,
            ],
            options,
            "行政区域面雨量实况"
          );
        }
        else if (this.basin == "6") {
          this.handleByChoose(
            [
            getdzPotentialPointsRainSkShuZhi,
            getdzPotentialPointsRainSkYanse,
            getdzPotentialPointsRainSkLieBiao,
            ],
            options,
            "地灾隐患点面雨量实况"
          );
        }
        else if (this.basin == "7") {
          this.handleByChoose(
            [
            getshPotentialPointsRainSkShuZhi,
            getshPotentialPointsRainSkYanse,
            getshPotentialPointsRainSkLieBiao,
            ],
            options,
            "山洪隐患点面雨量实况"
          );
        }
      }
    },

    //显示分屏时的标题
    showTitleSliptScreen(options,typeArr){
      const titleStartYear = options.startTime.split(" ")[0];
      const titleStartTime = options.startTime.split(" ")[1];
      const yearArr = titleStartYear.split("-");
      const timeArr = titleStartTime.split(":");
      const titleEndYear = options.endTime.split(" ")[0];
      const titleEndtTime = options.endTime.split(" ")[1];
      const endYearArr = titleEndYear.split("-");
      const endTimeArr = titleEndtTime.split(":");
      const tiltleContent = `${yearArr[0]}年${yearArr[1]}月${yearArr[2]}日${timeArr[0]}时-${endYearArr[0]}年${endYearArr[1]}月${endYearArr[2]}日${endTimeArr[0]}时`;
      this.fenPingRight = tiltleContent + `${typeArr[1]}`
      this.fenPingLeft = tiltleContent + `${typeArr[0]}`
      this.isShowfenPingTitle = true;
    },
    //分屏下载
    compareDownload(
      funcionsArr,
      typeArr,
      options,
      lieBiaoTitileLeft,
      lieBiaoTitileRight
    ) {
      this.surfaceRainfall.forEach(async (item) => {
        options.type = typeArr[0];
        const index = parseInt(item) - 1;
        //数值
        if (item == "1") {
          //左边
          let shuzhiLeft = await funcionsArr[index](options);
          shuzhiLeft.data && this.exportToExcel(shuzhiLeft.data,lieBiaoTitileLeft + "-数值.xlsx")
          // this.compareByShuZhi(shuzhiLeft, map2Layer[0]);
          //右边
          options.type = typeArr[1];
          //是否要计下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
          }
          let shuzhiRight = await funcionsArr[index](options);
          shuzhiLeft.data && this.exportToExcel(shuzhiRight.data,lieBiaoTitileRight + "-数值.xlsx")
          // this.compareByShuZhi(shuzhiRight, map1Layer[0]);
        }
        //填色
        else if (item == "2") {
          //左边
          let yanseLeft = await funcionsArr[index](options);
          yanseLeft.data.areaRainYB && this.exportToExcel(yanseLeft.data.areaRainYB,lieBiaoTitileLeft + "-颜色.xlsx")
          // this.compareByFillColor(yanseLeft, map2Layer[1]);
          //右边
          options.type = typeArr[1];
          //判断是否需要计算下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
          }
          const yanseRight = await funcionsArr[index](options);
          yanseRight.data.areaRainYB && this.exportToExcel(yanseRight.data.areaRainYB,lieBiaoTitileRight + "-颜色.xlsx")
          // this.compareByFillColor(yanseRight, map1Layer[1]);
        }
        //列表
        else if (item == "3") {
          //左边
          const libBiaoLeft = await funcionsArr[index](options);
          libBiaoLeft.data && this.exportToExcel(libBiaoLeft.data,lieBiaoTitileLeft + "-列表.xlsx")
          //右边
          options.type = typeArr[1];
          //判断是否需要计算下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
          }
          const libBiaoRight = await funcionsArr[index](options);
          libBiaoRight.data && this.exportToExcel(libBiaoRight.data,lieBiaoTitileRight + "-列表.xlsx")
        }
      });
    },

    //分屏比较
    compareWithSplitScreen(
      funcionsArr,
      typeArr,
      options,
      map2Layer,
      map1Layer,
      lieBiaoTitileLeft,
      lieBiaoTitileRight
    ) {
      map1Layer && map1Layer.forEach(item=>{
        item.getSource().clear();
      })
      this.surfaceRainfall.forEach(async (item) => {
        options.type = typeArr[0];
        const index = parseInt(item) - 1;
        //数值
        if (item == "1") {
          //左边
          let shuzhiLeft = await funcionsArr[index](options);
          this.compareByShuZhi(shuzhiLeft, map2Layer[0]);
          //右边
          options.type = typeArr[1];
          //是否要计下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
            console.log(options)
          }
          let shuzhiRight = await funcionsArr[index](options);
          this.compareByShuZhi(shuzhiRight, map1Layer[0]);
        }
        //填色
        else if (item == "2") {
          //左边
          let yanseLeft = await funcionsArr[index](options);
          console.log(yanseLeft);
          this.compareByFillColor(yanseLeft, map2Layer[1]);
          //右边
          options.type = typeArr[1];
          //判断是否需要计算下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
            console.log(options)
          }
          const yanseRight = await funcionsArr[index](options);
          this.compareByFillColor(yanseRight, map1Layer[1]);
        }
        //列表
        else if (item == "3") {
          //左边
          const libBiaoLeft = await funcionsArr[index](options);
          //右边
          options.type = typeArr[1];
          //判断是否需要计算下一个时效
          if (this.dataType == "4" || this.dataType == "5") {
            const timeSpace = parseInt(
              this.selectTimeSpace[this.selectTimeSpaceIndex].value
            );
            const nextValidity = parseInt(this.validity) + timeSpace;
            options.nTimes = nextValidity + "";
            console.log(options)
          }
          const libBiaoRight = await funcionsArr[index](options);
          this.compareByLieBiao(
            libBiaoLeft,
            libBiaoRight,
            lieBiaoTitileLeft,
            lieBiaoTitileRight
          );
        }
      });
    },
    //列表对比
    compareByLieBiao(libBiaoLeft, libBiaoRight, tiltleLeft, titleRight) {
      if (libBiaoLeft.data.length) {
        this.selectCurrentLeft = libBiaoLeft.data;
        this.tiltleLeft = tiltleLeft;
      }
      if (libBiaoRight.data.length) {
        this.selectCurrentRight = libBiaoRight.data;
        this.titleRight = titleRight;
      }
      this.isShowCompareDialog = true;
    },
    //填色对比
    compareByFillColor(yanse, layer) {
      const colors = yanse.data.areaRainLV.map((itemColor) =>
        itemColor.elementcolor.toString(16).padStart(6, "0")
      );
      yanse.data.areaRainYB.forEach((itemYanse, index) => {
        let feature;
        if (itemYanse.basinPerimeterArray) {
          feature = new Feature({
            geometry: new Polygon([itemYanse.basinPerimeterArray]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              fill: new Fill({
                color: "#" + colors[index],
              }),
            })
          );
        } else {
          const lat = parseFloat(itemYanse.longitude);
          const lng = parseFloat(itemYanse.latitude);
          feature = new Feature({
            geometry: new Point([lat, lng]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              image: new Circle({
                fill: new Fill({
                  color: "#" + colors[index],
                }),
                radius: itemYanse.arearain * 2,
              }),
            })
          );
        }

        layer && layer.getSource().addFeature(feature);
      });
    },
    //各种对比的数值处理
    compareByShuZhi(shuzhi, layer) {
      //左边地图
      let lat;
      let lng;
      shuzhi.data.forEach((itemShuZhi) => {
        lat = parseFloat(itemShuZhi.longitude);
        lng = parseFloat(itemShuZhi.latitude);
        const feature = new Feature({
          geometry: new Point([lat, lng]),
          name:itemShuZhi.name,
        });
        feature.setStyle(
          new Style({
            text: new Text({
              offsetX: 0,
              offsetY: 10,
              font: "normal 12px 微软雅黑",
              text: itemShuZhi.arearain + "",
              fill: new Fill({
                color: "#2394FF",
              }),
            }),
          })
        );
        layer && layer.getSource().addFeature(feature);
      });
    },

    //导出
    download() {
      this.queryActiveIndex = 1;
      const options = {};
      let startTime;
      let endTime;
      let formatter = "YYYY-MM-DD HH:mm:ss";
      if (this.selectTime) {
        startTime = moment(this.selectTime[0]).format(formatter);
        endTime = moment(this.selectTime[1]).format(formatter);
      } else {
        startTime = moment(new Date()).format(formatter);
        const days = parseInt(
          this.selectTitleIndex == 0
            ? this.selectYuBaoQuickItems[this.selectQuickIndex].value
            : this.selectSKQuickItems[this.selectQuickIndex].value
        );
        const now = new Date();
        endTime = moment(
          new Date().setDate(
            now.getDate() + this.selectTitleIndex == 0 ? days : -days
          )
        ).format(formatter);
      }
      options.startTime = startTime;
      options.endTime = endTime;
      options.nTimes = this.validity;
      //预报
      if (this.selectTitleIndex == 0) {
        if (this.dataType == "1") {
          options.type = "EC网格";
        } else if (this.dataType == "2") {
          options.type = "智能网格";
        }
        //数据源对比
        else if (this.dataType == "3") {
          //中小河流EC和只能网格对比
          //创建分屏
          const typeArr = ["EC网格", "智能网格"];
          if (this.basin == "1") {
            this.compareDownload(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              "中小河流域-EC网格预报",
              "中小河流域-智能网格预报"
            );
          }
          if (this.basin == "2") {
            this.compareDownload(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪沟-EC网格预报",
              "山洪沟-智能网格预报"
            );
          }
          if (this.basin == "3") {
            this.compareDownload(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              "水库上游面雨量-EC网格预报",
              "水库上游面雨量-智能网格预报"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareDownload(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              "主要河流-EC网格预报",
              "主要河流-智能网格预报"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareDownload(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              "行政区域-EC网格预报",
              "行政区域-智能网格预报"
            );
          }
          if (this.basin == "6") {
            this.compareDownload(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              "地灾害隐患点-EC网格预报",
              "地灾害隐患点-智能网格预报"
            );
          }
          if (this.basin == "7") {
            this.compareDownload(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪隐患点-EC网格预报",
              "山洪隐患点-智能网格预报"
            );
          }
        }
        //EC对比
        else if (this.dataType == "4") {
          //创建分屏
          const typeArr = ["EC网格", "EC网格"];
          if (this.basin == "1") {
            this.compareDownload(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              "中小河流域-EC网格预报当前时效",
              "中小河流域-EC网格预报下个时效"
            );
          }
          if (this.basin == "2") {
            this.compareDownload(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪沟-EC网格预报当前时效",
              "山洪沟-EC网格预报下个时效"
            );
          }
          if (this.basin == "3") {
            this.compareDownload(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              "水库上游面雨量-EC网格预报当前时效",
              "水库上游面雨量-EC网格预报下个时效"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareDownload(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              "主要河流-EC网格预报当前时效",
              "主要河流-EC网格预报下个时效"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareDownload(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              "行政区域-EC网格预报当前时效",
              "行政区域-EC网格预报下个时效"
            );
          }
          if (this.basin == "6") {
            this.compareDownload(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              "地灾害隐患点-EC网格预报当前时效",
              "地灾害隐患点-EC网格预报下个时效"
            );
          }
          if (this.basin == "7") {
            this.compareDownload(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪隐患点-EC网格预报当前时效",
              "山洪隐患点-EC网格预报下个时效"
            );
          }
        }
        //智能对比
        else if (this.dataType == "5") {
          //创建分屏
          const typeArr = ["智能网格", "智能网格"];
          if (this.basin == "1") {
            this.compareDownload(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              typeArr,
              options,
              "中小河流域-智能网格预报当前时效",
              "中小河流域-智能网格预报下个时效"
            );
          }
          if (this.basin == "2") {
            this.compareDownload(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪沟-智能网格报当前时效",
              "山洪沟-智能网格报下个时效"
            );
          }
          if (this.basin == "3") {
            this.compareDownload(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              typeArr,
              options,
              "水库上游面雨量-智能网格预报当前时效",
              "水库上游面雨量-智能网格预报下个时效"
            );
          }
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.compareDownload(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              typeArr,
              options,
              "主要河流-智能网格预报当前时效",
              "主要河流-智能网格预报下个时效"
            );
          }
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.compareDownload(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              typeArr,
              options,
              "行政区域-智能网格预报当前时效",
              "行政区域-智能网格预报下个时效"
            );
          }
          if (this.basin == "6") {
            this.compareDownload(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              typeArr,
              options,
              "地灾害隐患点-智能网格预报当前时效",
              "地灾害隐患点-智能网格预报下个时效"
            );
          }
          if (this.basin == "7") {
            this.compareDownload(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              typeArr,
              options,
              "山洪隐患点-智能网格预报当前时效",
              "山洪隐患点-智能网格预报下个时效"
            );
          }
        }
        if (this.dataType == "1" || this.dataType == "2") {
          //中小河流域
          if (this.basin == "1") {
            this.handleDwonload(
              [
                getRiverRainYbWithShuZhi,
                getRiverRainYbWithYanSe,
                getRiverRainYbWithLieBiao,
              ],
              options,
              "中小河流域"
            );
          }
          //山洪沟
          if (this.basin == "2") {
            this.handleDwonload(
              [
                getGullyRainYbShuZhi,
                getGullyRainYbYanSe,
                getGullyRainYbLieBiao,
              ],
              options,
              "山洪沟"
            );
          }
          //水库上游面雨量预报
          if (this.basin == "3") {
            this.handleDwonload(
              [
                getReservoirRainYbShuzhi,
                getReservoirRainYbYanSe,
                getReservoirRainYbLieBiao,
              ],
              options,
              "水库上游面"
            );
          }
          //主要河流
          if (this.basin == "4") {
            options.river = parseInt(Math.random() * 10);
            this.handleDwonload(
              [getMainRiverShuzhi, getMainRiverYanSe, getMainRiverLieBiao],
              options,
              "主要河流"
            );
          }
          //行政区
          if (this.basin == "5") {
            let areacode;
            if (this.city == "650000") {
              areacode = parseInt(this.city + "000000");
            } else {
              areacode = parseFloat(this.county + "000000");
            }
            options.areacode = areacode;
            this.handleDwonload(
              [
                getadministrativeRegionShuZhi,
                getadministrativeRegionYanSe,
                getadministrativeRegionLieBiao,
              ],
              options,
              "行政区域"
            );
          }
          if (this.basin == "6") {
            this.handleDwonload(
              [
                getdzPotentialPointsRainYbShuZhi,
                getdzPotentialPointsRainYbYanSe,
                getdzPotentialPointsRainYblieBiao,
              ],
              options,
              "地灾隐患点"
            );
          }
          if (this.basin == "7") {
            this.handleDwonload(
              [
                getshPotentialPointsRainYbShuzhi,
                getshPotentialPointsRainYbYanSe,
                getshPotentialPointsRainYbLieBiao,
              ],
              options,
              "山洪隐患点"
            );
          }
        }
      }
      //实况
      else if (this.selectTitleIndex == 1) {
        if (this.dataType == "1") {
          options.type = "站点实况";
        } else if (this.dataType == "2") {
          options.type = "融合网格";
        }
        //中小河流域
        if (this.basin == "1") {
          this.handleDwonload(
            [
            getriverRainSkShuzhi,
            getriverRainSkYanSe,
            getriverRainSkLieBiao,
            ],
            options,
            "中小河流域面雨量实况",
          );
        }
        //山洪沟
        else if (this.basin == "2") {
          this.handleDwonload(
            [getGullyRainSkShuZhi,getGullyRainSkYanSe,getGullyRainSkLieBiao],
            options,
            "山洪沟面雨量实况"
          );
        }
        //水库上游面雨量预报
        else if (this.basin == "3") {
          this.handleDwonload(
            [
            getReservoirRainSkShuZhi,
            getReservoirRainSkYanse,
            getReservoirRainSkLieBiao,
            ],
            options,
            "水库上游面雨量实况"
          );
        }
        //主要河流
        else if (this.basin == "4") {
          options.river = parseInt(Math.random() * 10);
          console.log(options);
          this.handleDwonload(
            [
            getMainRiverSKShuZhi,
            getMainRiverSKYanSe,
            getMainRiverSKLieBiao,
            ],
            options,
            "主要河流面雨量"
          );
        }
        //行政区
        else if (this.basin == "5") {
          let areacode;
          if (this.city == "650000") {
            areacode = parseInt(this.city + "000000");
          } else {
            areacode = parseFloat(this.county + "000000");
          }
          options.areacode = areacode;
          this.handleDwonload(
            [
            getAdministrativeRegionSKShuZhi,
            getAdministrativeRegionSKYanse,
            getAdministrativeRegionSKLieBiao,
            ],
            options,
            "行政区域面雨量实况"
          );
        }
        else if (this.basin == "6") {
          this.handleDwonload(
            [
            getdzPotentialPointsRainSkShuZhi,
            getdzPotentialPointsRainSkYanse,
            getdzPotentialPointsRainSkLieBiao,
            ],
            options,
            "地灾隐患点面雨量实况"
          );
        }
        else if (this.basin == "7") {
          this.handleDwonload(
            [
            getshPotentialPointsRainSkShuZhi,
            getshPotentialPointsRainSkYanse,
            getshPotentialPointsRainSkLieBiao,
            ],
            options,
            "山洪隐患点面雨量实况"
          );
        }
      }
    },

    //根据像素比返回对应的图片
    getPictureUrl(name) {
      name = styleUtil.getBackImageUrlByPixelRatio(name);
      return require("@/assets/images/surface-rainforecast/" + name);
    },

    //导出的处理函数
    handleDwonload(functionArr, options, title) {
      this.surfaceRainfall.forEach(async (item) => {
        const index = parseInt(item) - 1;
        if (item == "1") {
          const shuzhi = await functionArr[index](options);
          //下载数值
          shuzhi.data && Array.isArray(shuzhi.data) && this.exportToExcel(shuzhi.data,title + "-数值.xlsx");
        } else if (item == "2") {
          const yanse = await await functionArr[index](options);
          let data;
          const colors = yanse.data.areaRainLV;
          if(this.selectTitleIndex == 0){
            data = yanse.data.areaRainYB;
          }
          else if(this.selectTitleIndex == 1){
            data = yanse.data.areaRainSK;
          }
          this.exportToExcel(data,title + "-颜色.xlsx");
        } else {
          const liebiao = await await functionArr[index](options);
          liebiao.data && this.exportToExcel(liebiao.data,title + "-列表.xlsx")
        }
      });
    },

    //处理通过选择向地图或者列表添加元素的功能
    handleByChoose(functionArr, options, title) {
      this.surfaceRainfall.forEach(async (item) => {
        const index = parseInt(item) - 1;
        if (item == "1") {
          const shuzhi = await functionArr[index](options);
          this.addTextToMap(shuzhi);
        } else if (item == "2") {
          const yanse = await await functionArr[index](options);
          if(this.selectTitleIndex == 0){
            this.addFillColor(yanse);
          }
          else if(this.selectTitleIndex == 1){
            this.addFillColorSK(yanse);
          }
          
        } else {
          const liebiao = await await functionArr[index](options);
          this.addLsit(liebiao, title);
        }
      });
    },
    //关闭列表弹窗
    closedDiglog() {
      this.dialogTableVisible = false;
    },

    //添加数值 == 预报
    addTextToMap(shuzhi) {
      console.log("数值",JSON.stringify(shuzhi.data))
      this.shuzhiLayer && this.shuzhiLayer.getSource().clear();
      let lat;
      let lng;
      shuzhi.data.forEach((itemShuZhi) => {
        lat = parseFloat(itemShuZhi.longitude);
        lng = parseFloat(itemShuZhi.latitude);
        const feature = new Feature({
          geometry: new Point([lat, lng]),
          name:itemShuZhi.name,
        });
        feature.setStyle(
          new Style({
            text: new Text({
              offsetX: 0,
              offsetY: 10,
              font: "normal 16px 微软雅黑",
              text: itemShuZhi.arearain + "",
              fill: new Fill({
                color: "#2394FF",
              }),
            }),
          })
        );
        this.shuzhiLayer && this.shuzhiLayer.getSource().addFeature(feature);
      });
      this.$store.getters.Map.view.animate({
        center: [lat, lng],
      });
    },

    //添加填色图层 == 预报
    addFillColor(yanse) {
      console.log("填色",JSON.stringify(yanse.data))
      this.fillColorLayer && this.fillColorLayer.getSource().clear();
      const colors = yanse.data.areaRainLV.map((itemColor) =>
        itemColor.elementcolor.toString(16).padStart(6, "0")
      );
      yanse.data.areaRainYB.forEach((itemYanse, index) => {
        let feature;
        if (itemYanse.basinPerimeterArray) {
          feature = new Feature({
            geometry: new Polygon([itemYanse.basinPerimeterArray]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              fill: new Fill({
                color: "#" + colors[index],
              }),
            })
          );
        } else {
          const lat = parseFloat(itemYanse.longitude);
          const lng = parseFloat(itemYanse.latitude);
          feature = new Feature({
            geometry: new Point([lat, lng]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              image: new Circle({
                fill: new Fill({
                  color: "#" + colors[index],
                }),
                radius: itemYanse.arearain * 2,
              }),
            })
          );
        }

        this.fillColorLayer && this.fillColorLayer.getSource().addFeature(feature);
      });
    },

    //添加列表数据 == 预报
    addLsit(liebiao, title) {
      console.log("列表",JSON.stringify(liebiao))
      if (liebiao.data.length) {
        this.currentData = liebiao.data;
        this.title = title;
        this.dialogTableVisible = true;
      }
    },

    //实况的填色
    addFillColorSK(yanse) {
      console.log(yanse);
      this.fillColorLayer && this.fillColorLayer.getSource().clear();
      const colors = yanse.data.areaRainLV.map((itemColor) =>
        itemColor.elementcolor.toString(16).padStart(6, "0")
      );
      yanse.data.areaRainSK.forEach((itemYanse, index) => {
        let feature;
        if (itemYanse.basinPerimeterArray) {
          feature = new Feature({
            geometry: new Polygon([itemYanse.basinPerimeterArray]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              fill: new Fill({
                color: "#" + colors[index],
              }),
            })
          );
        } else {
          const lat = parseFloat(itemYanse.longitude);
          const lng = parseFloat(itemYanse.latitude);
          feature = new Feature({
            geometry: new Point([lat, lng]),
            name:itemYanse.name,
          });
          feature.setStyle(
            new Style({
              image: new Circle({
                fill: new Fill({
                  color: "#" + colors[index],
                }),
                radius: itemYanse.arearain * 2,
              }),
            })
          );
        }

        this.fillColorLayer && this.fillColorLayer.getSource().addFeature(feature);
      });
    },
    //根据当前的地图创建一个的地图
    createNewMapByThisMap() {
      if (this.map2 != null) {
        return;
      }
      const map = this.$store.getters.Map.map;
      const target = document.querySelector("#" + map.getTarget());
      const width = target.clientWidth;
      const height = target.clientHeight;
      this.parent = target.parentNode;
      this.originWidth = width;
      this.originHeight = height;
      // target.style.width = width / 2 + 'px';
      const map2Container = document.createElement("div");
      map2Container.style.width = width / 2 + "px";
      map2Container.style.height = height + "px";
      map2Container.style.padding = "0";
      map2Container.style.margin = "0";
      this.parent.appendChild(map2Container);
      this.map2 = new Map({
        target: map2Container,
        view: map.getView(),
        controls: [],
      });
      map.getAllLayers().forEach((layerItem) => {
        const type = layerItem.constructor.name.replace("Layer", "");
        const name = layerItem.get("name");
        const zIndex = layerItem.getZIndex();
        const source = _.cloneDeep(layerItem.getSource());
        let style;
        if (
          type != "Group" &&
          type != "Image" &&
          type != "Layer" &&
          type != "Tile" &&
          type != "WebGLPoints" &&
          type != "WebGLTile"
        ) {
          if(layerItem.getStyle){
            style = _.cloneDeep(layerItem.getStyle());
          }
        }
        const newLayer = new layer[type]({
          source: source,
          style: style != null ? style : null,
        });
        if (
          name == "surface-rainfall-forecast-shuzhi-layer" ||
          name == "surface-rainfall-forecast-fillcolor-layer"
        ) {
          newLayer.set("name", name);
          newLayer.setZIndex(zIndex);
        }
        this.map2 && this.map2.addLayer(newLayer);
      });
    },

    //创建分屏平返回对应的图层
    getMap2TargetLayer() {
      this.createNewMapByThisMap();
      const shuzhiLayer = this.map2
        .getAllLayers()
        .find(
          (layer) =>
            layer.get("name") == "surface-rainfall-forecast-shuzhi-layer"
        );
      shuzhiLayer && shuzhiLayer.getSource().clear();
      const fillColorLayer = this.map2
        .getAllLayers()
        .find(
          (layer) =>
            layer.get("name") == "surface-rainfall-forecast-fillcolor-layer"
        );
      fillColorLayer && fillColorLayer.getSource().clear();
      return {
        shuzhiLayer,
        fillColorLayer,
      };
    },
    //解除分频操作
    relieve() {
      if ((this, this.map2 != null && this.parent != null)) {
        const map = this.$store.getters.Map.map;
        const target = document.querySelector("#" + map.getTarget());
        const map2Con = this.map2.getTarget();
        // this.parent.
        this.parent.removeChild(map2Con);
        this.map2 = null;
        this.fillColorLayer.getSource().clear();
        this.shuzhiLayer.getSource().clear();
        this.isShowfenPingTitle = false;
      }
    },
    //关闭列表比对弹窗
    closedDiglogCompare() {
      this.isShowCompareDialog = false;
      //同时移除map2的高亮图层
      let highLayer = this.map2
        .getAllLayers()
        .find(
          (layer) =>
            layer.get("name") ==
            "surface-rainfall-forecast-status-difference-map2-highLayer"
        );
      if (highLayer) {
        this.map2.removeLayer(highLayer);
      }
    },

    //map2展示高亮图层
    showHightLayer(row) {
      let highLayer = this.map2
        .getAllLayers()
        .find(
          (layer) =>
            layer.get("name") ==
            "surface-rainfall-forecast-status-difference-map2-highLayer"
        );
      if (highLayer) {
        this.map2.removeLayer(highLayer);
      }
      highLayer = new Vector({
        source: new VectorSource({}),
        name: "surface-rainfall-forecast-status-difference-map2-highLayer",
      });
      highLayer = createHighLayer(highLayer, row);
      this.map2.addLayer(highLayer);
      //跳转过去
      this.map2.getView().animate({
        center: [parseFloat(row.longitude), parseFloat(row.latitude)],
        duration: 1000,
      });
    },

    // 导出为 Excel 的函数
    exportToExcel(array, fileName) {
        const flatArray = this.flattenData(array); 
        const worksheet = XLSX.utils.json_to_sheet(flatArray);
        const workbook = XLSX.utils.book_new(); 
        XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
        const excelBuffer = XLSX.write(workbook, {
          bookType: "xlsx",
          type: "array",
        }); // 生成 Excel 文件
        const blob = new Blob([excelBuffer], {
          type: "application/octet-stream",
        }); // 创建 Blob 对象
        const url = URL.createObjectURL(blob);
        const link = document.createElement("a");
        link.href = url;
        link.download = fileName;
        link.click(); 
        URL.revokeObjectURL(url); 
      },
    // 将复杂的对象转换为扁平化的数组
    flattenData(data) {
        const result = [];
        data.forEach((item) => {
          const flatItem = {};
          this.flattenObject(item, flatItem);
          result.push(flatItem);
        });
        return result;
      },

      // 递归扁平化对象
      flattenObject(obj, flatItem, prefix = "") {
        for (const key in obj) {
          if (Array.isArray(obj[key])) {
            flatItem[prefix + key] = obj[key].join(", "); // 数组合并为字符串
          } else if (typeof obj[key] === "object" && obj[key] !== null) {
            flattenObject(obj[key], flatItem, prefix + key + "."); // 嵌套对象处理
          } else {
            flatItem[prefix + key] = obj[key]; // 其他基本类型值直接赋值
          }
        }
      }
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: content-box;
}
// .surface-rainfall-forecast{
//   position: relative;
// }
.right-panel {
  position: absolute;
  top: -px-to-rem(16);
  right: px-to-rem(20);
  width: px-to-rem(456);
  height: px-to-rem(700);
  padding: px-to-rem(16);
  background-color: $surface-rainfall-forecast-backgroud-color;
  span {
    font-family: $public-font;
    font-size: px-to-rem(14);
    color: $font-text-color;
  }
  z-index: 10;
  // 标题
  .right-panel-title {
    display: flex;
    align-items: center;
    gap: px-to-rem(16);
    font-size: px-to-rem(16);
    .title-left {
      width: px-to-rem(12);
      height: px-to-rem(12);
      background: radial-gradient(0% 84% at 19% 25%, #ffffff 0%, #2394ff 100%);
      border-radius: 50%;
    }
  }
  //实况与预报选择
  .select-btn {
    width: px-to-rem(420);
    margin-top: px-to-rem(16);
    border-bottom: 1px solid #284f6e;
    display: flex;
    align-items: center;
    gap: px-to-rem(16);
    span {
      width: px-to-rem(56);
      height: px-to-rem(30);
      font-size: px-to-rem(17);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  //选择时间
  .select-time {
    margin-top: px-to-rem(16);
    display: flex;
    align-items: center;
    gap: px-to-rem(14);
    ::v-deep .el-date-editor--datetimerange.el-input__inner {
      width: 350px;
      background-color: #3c6485;
      border: none;
      border-radius: 0px;
    }
    ::v-deep .el-input__inner {
      height: 28px;
    }
    ::v-deep .el-input__icon {
      height: 150%;
    }
    ::v-deep .el-range-separator {
      height: 160%;
    }
    ::v-deep .el-range-input {
      color: #ffffff;
      background-color: #3c6485;
    }
  }
  //快速选择与时间间隔
  .select-quick,
  .select-time-space {
    margin-top: px-to-rem(16);
    display: flex;
    align-items: center;
    gap: px-to-rem(14);
    div {
      display: flex;
      align-items: center;
      width: px-to-rem(360);
      gap: px-to-rem(14);
      button {
        color: $font-text-color;
        background-color: #3c6485;
        outline: none;
        border: none;
        width: px-to-rem(77);
        height: px-to-rem(28);
        cursor: pointer;
      }
    }
  }
  //时效
  .select-time-duration {
    margin-top: px-to-rem(16);
    display: flex;
    align-items: center;
    gap: px-to-rem(14);
    ::v-deep .el-input__inner {
      background-color: #3c6484;
      color: white;
      border: none;
      height: px-to-rem(30);
      border: none;
      width: px-to-rem(350);
    }
  }
  //流域和隐患点
  .select-river,
  .select-yinhuan {
    margin-top: px-to-rem(40);
    display: flex;
    align-items: center;
    gap: px-to-rem(20);
    // div{
    //   display: flex;
    //   align-items: center;
    //   width: px-to-rem(360);
    //   gap: px-to-rem(14);
    // }
    ::v-deep .el-radio {
      color: white !important;
      width: 7rem;
      margin-right: 0px;
    }
  }
  .select-yinhuan {
    margin-top: px-to-rem(14);
  }
  //县和市
  .select-city,
  .select-county {
    margin-top: px-to-rem(16);
    display: flex;
    align-items: center;
    gap: px-to-rem(14);
    ::v-deep .el-input__inner {
      background-color: #3c6484;
      color: white;
      border: none;
      height: px-to-rem(30);
      border: none;
      width: px-to-rem(350);
    }
  }

  //数据源和面雨量
  .data-type,
  .rain-show-type {
    margin-top: px-to-rem(40);
    display: flex;
    align-items: center;
    gap: px-to-rem(20);
    // div {
    //   display: flex;
    //   align-items: center;
    //   width: px-to-rem(360);
    //   gap: px-to-rem(14);
    // }
    ::v-deep .el-radio {
      color: white !important;
    }
  }
  .rain-show-type {
    margin-top: px-to-rem(14);
  }

  //查询和导出
  .query {
    margin-top: px-to-rem(40);
    display: flex;
    justify-content: space-evenly;
    gap: px-to-rem(88);
    button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: px-to-rem(154);
      height: px-to-rem(34);
      background-color: rgba(35, 148, 255, 0.4);
      color: white;
      outline: none;
      border-radius: 2px;
      border: 1px solid #2394ff;
      font-size: px-to-rem(16);
      cursor: pointer;
    }
  }
}

//图表
.charts {
  position: absolute;
  top: px-to-rem(100);
  left: px-to-rem(708);
  background-color: $surface-rainfall-forecast-backgroud-color;
  width: px-to-rem(536);
  // height: px-to-rem(550);
  padding: px-to-rem(14);
  z-index: 20;
  //标题
  .charts-panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: px-to-rem(16);
    span {
      color: #81c1fc;
    }
    .charts-title-left {
      display: flex;
      align-items: center;
      gap: px-to-rem(14);
    }
    .charts-icon {
      width: px-to-rem(12);
      height: px-to-rem(12);
      background: radial-gradient(0% 84% at 19% 25%, #ffffff 0%, #2394ff 100%);
      border-radius: 50%;
    }
    .charts-closed {
      cursor: pointer;
    }
  }
  //时间
  .charts-select-time {
    margin-top: px-to-rem(14);
    display: flex;
    align-items: center;
    gap: px-to-rem(14);
    color: $font-text-color;
    ::v-deep .el-date-editor--datetimerange.el-input__inner {
      width: px-to-rem(438);
      background-color: #3c6485;
      border: none;
      border-radius: 0px;
    }
    ::v-deep .el-input__inner {
      height: 28px;
    }
    ::v-deep .el-input__icon {
      height: 150%;
    }
    ::v-deep .el-range-separator {
      height: 160%;
    }
    ::v-deep .el-range-input {
      color: #ffffff;
      background-color: #3c6485;
    }
  }
  //图表内容
  .charts-content {
    margin-top: px-to-rem(14);
    color: #b4d6ff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: px-to-rem(8);
    .charts-time {
      font-size: px-to-rem(14);
    }
  }
  //选择
  .charts-option-select{
    display: flex;
    color: white;
    align-items: center;
    gap: px-to-rem(14);
    margin-top: px-to-rem(10);
    ::v-deep .el-radio {
      color: white !important;
      width: 7rem;
      margin-right: 0px;
    }
  }
  //图表查询按钮
  .charts-query{
   margin: px-to-rem(10) 0;
   text-align: center;
  }
  //图表
  .charts-surface-rainfull-container{
    width: 100%;
    height: px-to-rem(350);
  }
}

//图例区域
.surface-rainfull-legend {
  position: absolute;
  left: px-to-rem(10);
  top: 34.5rem;
  z-index: 10;
  width: px-to-rem(120);
  height: px-to-rem(248);
  background-color: $surface-rainfall-forecast-backgroud-color;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  color: $font-text-color;
  .legend-show {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: px-to-rem(8);
    justify-content: space-between;
    margin-left: px-to-rem(24);
    .legend-line {
      width: 6.75rem;
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      gap: px-to-rem(8);
      .legend-num {
        width: 6.125rem;
        font-size: px-to-rem(12);
      }
    }
    .legend-icon {
      width: 1rem;
      height: 1rem;
      border-radius: 50%;
    }
  }
}
//工具
.surface-rainfull-tool {
  position: absolute;
  z-index: 10;
  left: px-to-rem(10);
  top: -1.625rem;
  display: flex;
  align-items: center;
  gap: px-to-rem(10);
  color: #ffffff;
  font-size: px-to-rem(14);
  .surface-rainfull-map-tool {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: px-to-rem(80);
    height: px-to-rem(32);
    border-radius: px-to-rem(5);
    background-color: $surface-rainfall-forecast-backgroud-color;
    .map-tool-item {
      display: flex;
      gap: px-to-rem(2);
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
  img {
    width: px-to-rem(14);
    height: px-to-rem(14);
  }
}
//选中标题时的样式
.select-title {
  border-bottom: 1px solid #5584aa;
}
.fenping-title{

  .title-fenping-left{
    position: fixed;
    top: 100px;
    left: 25%;
    transform: translate(-50%,0);
    width: px-to-rem(400);
    height: px-to-rem(40);
    z-index: 10;
    font-size: 20px;
    font-family: $public-font;
    color: white;
  }
  .title-fenping-right{
    position: fixed;
    top: 100px;
    right: 25%;
    // transform: translate(-25%,0);
    width: px-to-rem(400);
    height: px-to-rem(40);
    color: white;
    z-index: 10;
    font-size: 20px;
    font-family: $public-font;
  }
}
.icon-daoda {
  color: #8eb4cc;
}
//快速选择选中的样式
.select-quick-active {
  background-color: #2394ff !important;
}
//图例的icon的背景颜色
.line1 {
  background-color: #840041;
}
.line2 {
  background-color: #ff00fe;
}
.line3 {
  background-color: #0001fc;
}
.line4 {
  background-color: #61b8ff;
}
.line5 {
  background-color: #3db93f;
}
.line6 {
  background-color: #a6f28e;
}
</style>
